<template lang="html">	
	<div class="body_wrap">			
		<div style="height: 100%;padding-bottom: 50px;">
			<van-tree-select height="100%" :items="p_items" :main-active-index.sync="active" @click-nav="navClick">
			  <template #content>
                 <div class="content_wrap">
					<van-row>
					  <van-col span="24" v-for="(item,index) in p_currentList" :key="index" class="product_col">
					  	<div class="li" v-if="item.imgUrl">
					  		<div><img :src="item.imgUrl" alt="" class="content_img"/></div>					  		
					  		<div style="text-align: center;font-size: 12px;">{{item.title}}</div>
					  	</div>
					  	<div class="describeInfo">{{item.describeInfo}}</div>
					  </van-col>						  
					</van-row>                 	
                 </div>
			  </template>
			</van-tree-select>			
		</div>
	</div>
</template>                                                                

<script>

export default {
	name: 'product',
	components: {

	},	
	data() {
	    return {
	      active: 0,
	      list:[],     // 原始数据
	      items: {zh:[],jap:[],en:[]},
	      p_items:[],
	      currentList:{zh:[],jap:[],en:[]},
	      p_currentList:[]
	    }  
	},
	watch:{
		 '$i18n.locale'(newValue) {
		 	this.p_items=this.items[newValue]
		 	this.p_currentList=this.currentList[newValue]
		 }
	},	
	methods: {	
       navClick(index){       	    
            let relationFileList=this.list[index].relationFileList  
            this.currentList={zh:[],jap:[],en:[]}
            relationFileList.forEach(item=>{
				let zh={
					imgUrl:item.uploadFile?item.uploadFile.fileUrl:'',						
					title:item.title,
					describeInfo:item.describeInfo
					
				}
				let en={
					imgUrl:item.uploadFile?item.uploadFile.fileUrl:'',						
					title:item.engTitle,
					describeInfo:item.describeInfo
				}
				let jap={
					imgUrl:item.uploadFile?item.uploadFile.fileUrl:'',						
					title:item.jpnTitle,
					describeInfo:item.describeInfo
				}  
				this.currentList.zh.push(zh)
				this.currentList.jap.push(jap)
				this.currentList.en.push(en)				
            })
			this.p_currentList=this.currentList[this.$i18n.locale]
       },
       init(){
			this.$Axios.Get(this.$baseUrl+'/categorySub/list?categoryId=2').then(res => {				
				this.list=res
				res.forEach(item=>{
					let zh={
						text:item.name
					}
					let en={
						text:item.engName				
					}
					let jap={
						text:item.jpnName						
					}
					this.items.zh.push(zh)
					this.items.jap.push(jap)
					this.items.en.push(en)					
				})
				this.p_items=this.items[this.$i18n.locale]
				res[0].relationFileList.forEach(item=>{
					let zh={
						imgUrl:item.uploadFile?item.uploadFile.fileUrl:'',						
						title:item.title,
						describeInfo:item.describeInfo
					}
					let en={
						imgUrl:item.uploadFile?item.uploadFile.fileUrl:'',						
						title:item.engTitle,
						describeInfo:item.describeInfo
					}
					let jap={
						imgUrl:item.uploadFile?item.uploadFile.fileUrl:'',						
						title:item.jpnTitle,
						describeInfo:item.describeInfo
					}					
					this.currentList.zh.push(zh)
					this.currentList.jap.push(jap)
					this.currentList.en.push(en)					
				})				
				this.p_currentList=this.currentList[this.$i18n.locale]	
				
			})       	   
    
       }
	},
	mounted() {	
	  this.init()
	}
  }
</script>
<style lang="scss" scoped="">
.body_wrap{position: absolute;width: 100%;height: 100%;}
.content_wrap{padding: 20px 10px;}
.content_img{width: 100%}
.li{margin-bottom: 10px;flex: 1;}
.describeInfo{flex: 1;padding-left: 10px;font-size: 12px;color: #777;}
.product_col{display: flex;margin-bottom: 4px;}
</style>



